<script lang="ts" setup>
// 父组件传递数据
const props = defineProps({
  limitCountImg: {
    type: Number,
    default: 9,
  },
  backUrl: {
    type: Array,
    default: [],
  },
  editIndex: {
    type: Number,
    default: null,
  },
});
// 定义暴露事件名
const emit = defineEmits(['handleUploadSuccess']);

/**
 * 上传图片配置：
 * imgConfig: {
    noneBtnImg: false,
    serverUrls: '', 上传地址
    fileList: [], // 上传文件列表
  }
 * handelExceed 上传的文件个数超出设定时触发的函数
 * beforeUpload 图片上传前的回调
 * handleSuccess 上传成功
 * handelChange
 * handelRemove 移出图片
 */
const imgConfig = reactive({
  noneBtnImg: false,
  serverUrls: 'http://hxbfb.bailingkeji.com/login/upload',
  fileList: [],
  // [
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
  // ],
});
if (props.backUrl['file']) {
  imgConfig.fileList.push({
    name: props.backUrl['content'],
    url: props.backUrl['file'][0],
  });
}
const handelExceed = () => {
  ElMessage.warning({ message: `最多只能上传${props.limitCountImg}张图片` });
};
const beforeUpload = (file) => {
  let arr = [
    'image/jpeg',
    'image/png',
    'image/jpg',
    'image/gif',
    'image/webp',
    'image/bmp',
  ];
  let isFormat = arr.includes(file.type);
  if (!isFormat) {
    ElMessage.warning({
      message: `仅支持.jpg .jpeg .png .gif .bmp .webp 格式文件!`,
    });
    imgConfig.noneBtnImg = false;
  }
  // const isLt500KB = file.size / 1024; // B => KB
  // if (!isLt500KB) {
  //   this.$message.error({ message: "上传头像图片大小不能超过 500KB!" });
  // }
  return isFormat;
};

const handleSuccess = (response, file, fileList) => {
  if (response.code != 200)
    return ElMessage.error({
      message: `图片上传失败!`,
    });
  emit('handleUploadSuccess', response, props.editIndex);
};

const handelRemove = (file, fileList) => {
  emit('handleUploadSuccess', fileList, props.editIndex);
  imgConfig.noneBtnImg = fileList.length >= props.limitCountImg;
};
const handelChange = (file, fileList) => {
  imgConfig.noneBtnImg = fileList.length >= props.limitCountImg;
};
</script>

<template>
  <div class="upload_img">
    <el-upload :action="imgConfig.serverUrls" :file-list="imgConfig.fileList" list-type="picture-card"
      :limit="props.limitCountImg" :on-exceed="handelExceed" :on-success="handleSuccess" :on-change="handelChange"
      :on-remove="handelRemove" :before-upload="beforeUpload"
      :class="['uoloadSty', imgConfig.noneBtnImg ? 'disUoloadSty' : '']">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
  </div>
</template>

<style lang="scss" scoped>
.upload_img {
  .uoloadSty ::v-deep .el-upload--picture-card {
    width: 95px;
    height: 95px;
    line-height: 95px;
  }

  ::v-deep .el-upload-list__item {
    width: 95px;
    height: 95px;
  }

  .disUoloadSty ::v-deep .el-upload--picture-card {
    display: none;
    /* 上传按钮隐藏 */
  }

  // 去掉上传图片中的放大镜
  ::v-deep .uoloadSty {
    .el-upload-list__item-preview {
      display: none;
    }

    .el-upload-list__item-delete {
      margin-left: 0px;
    }
  }
}
</style>
